
<template>
  <div id="visual">
    <div class="visual-app">
      <header>
        <topComponent name="榆林市公共资源交易平台数字见证大厅" @click.native="$router.push({path:'/ksh'})"></topComponent>
        <div class="header_button">
          <!-- <el-radio-group v-model="form.type"   @change="handleTabsChange">
            <el-radio-button  style="width: 100%;" label="KB">场地占用情况 </el-radio-button>
            <el-radio-button  label="PB">评标场地</el-radio-button>
          </el-radio-group> -->
          <button class="jfbutton top">场地占用情况</button>
          <div class="font18">
            <span>{{ tcData.projectName }}</span>
            <span  style="margin-left: 10px;">{{ tcData.pbkstime }}</span>
          </div>
          <div></div>
        </div>
      </header>
      <section>
        <div >
          <div  class="left_menu">
            <div class="left_menu_div">
              <div class="left_menu_tabs" >
                  <span @click="handleLeftPid('first')"
                        :style="{borderBottom:activeName === 'first'?'2px solid #fff':'',fontWeight: activeName === 'first'?'bold':''}">今日项目</span>
                  <!-- <span @click="handleLeftPid('two')"
                        style="margin-left: 10px;"
                        :style="{borderBottom:activeName === 'two'?'2px solid #fff':'',fontWeight: activeName === 'two'?'bold':''}">历史项目</span> -->
                    <!-- <i class="el-icon-arrow-down" style="margin-top: 6px;margin-left: 4px" @click="activeNameFlg = !activeNameFlg" v-if="activeName === 'two'" ></i> -->
                <div class="left_menu_tabs_time" v-if="activeNameFlg && activeName === 'two'" >
                  <span class="triangle" style="left: 20px;top: -8px;"></span>
                  <el-form ref="form" :model="form" size="mini" label-width="40px" >
                    <el-form-item label="时间">
                      <!-- <el-date-picker
                        style="width: 230px;"
                        v-model="form.time"
                        type="datetimerange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        :picker-options="pickerOptions"
                        @change="handTimeChange"
                        end-placeholder="结束日期">
                      </el-date-picker> -->
                      <el-date-picker
                        value-format="yyyy-MM-dd"
                        style="width: 190px;"
                        v-model="form.date"
                         type="date"
                         placeholder="选择日期时间"
                        @change="handTimeChange"
                        >
                      </el-date-picker>
                    </el-form-item>
                    <el-form-item label="名称">
                      <el-input v-model="form.search" style="width: 190px;"></el-input>
                      <button  class="jfbutton" style="margin-left: 10px;" @click.prevent="handleSubmit">查询</button>
                    </el-form-item>
                  </el-form>
                </div>
              </div>
            </div>
            <ul>
              <li  class="popoverli"><span> 序号</span><p  style="text-align: center;width: 100%;">项目名称</p></li>
            </ul>
            <ul class="left_menu_ul">
              <el-scrollbar style="height: 100%;">
                <el-popover
                  v-for="(item,index) in listMenu"  :key="index"
                  @mouseover.native="item_text_hover = index"
                  @click.native="handleMevu(item)"
                  placement="right-start"
                  popper-class="monitor-yt-popover"
                  width="260"
                  trigger="hover"
                >
                  <div class="popover-main">
                    <div>项目名称：{{ item.name }}</div>
                    <div>项目类型：{{ getXMLX(item)  }}</div>
                    <div>开标占用标室：
                      <span>{{item.kbfloorname }}<span v-if="item.kbfloorname">楼层</span>-{{ item.kbroom }}</span>
                    </div>
                    <div>评标占用标室：
                      <span>{{item.pbfloorname }}<span v-if="item.pbfloorname">楼层</span>-{{ item.pbroom }}</span>
                    </div>
                    <div>开标时间：{{ item.kbtime }}</div>
                    <div>评标时间：{{ item.pbtime }}</div>
                  </div>
                  <li class="popoverli " :class="{'activeli': item_text_hover=== index}"  slot="reference">
                    <span>{{ index+1 }}</span> <span class="text-overflow">{{ item.name }}</span>
                  </li>
                </el-popover>
              </el-scrollbar>
            </ul>
          </div>
        </div>
        <main>
          <proViewComponent ref="proView" :onEmit="onEmit" />
        </main>
      </section>
    </div>
  </div>
</template>

<script>
import { dvListAreaRoom,dvGetlistCamera,getSiteDataV2,dvListBidInfoAll } from "@/api/pageViewBig"
import topComponent from "@/components/top"
import proViewComponent from './proViewComponent.vue';
import dayjs from 'dayjs';
import dataJson  from '@/views/witness/components/Object3D/canvas/room.json'
import 'dayjs/locale/zh-cn'; // 引入中文语言包

export default {
  components: { proViewComponent,topComponent },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },
  data() {
    return {
      tcData:{
        pbkstime:undefined,
      },
      pickerOptions:{
        disabledDate: time => {
          // 选取前三个月数据
          let threeDate = new Date();
          threeDate.setMonth(threeDate.getMonth() - 3)
          return time.getTime()<threeDate.getTime() || time.getTime()> new Date().getTime()
        }
      },
      changdiList:[],
      tabPosition:'KB',
      activeNameFlg:false,
      item_text_hover:false,
      activeName:'first',
      spiltIndex:2,
      treeData: [{
        id: 1,
        label: '10楼',
        children: [{
          id: 4,
          label: '评标室',
          children: [{
            id: 9,
            label: '评标室1'
          }, {
            id: 10,
            label: '评标室2'
          }]
        },
          {
            id: 41,
            label: '开标室',
            children: [{
              id: 91,
              label: '开标室1'
            }, {
              id: 102,
              label: '开标室2'
            }]
          }
        ]
      }, {
        id: 2,
        label: '11楼',
        children: [{
          id: 5,
          label: '评标室1'
        }, {
          id: 6,
          label: '评标室2'
        }]
      }],
      // 树
      filterText:'',
      defaultProps: {
        children: 'children',
        label: 'name',
        isLeaf: 'leaf'
      },
      form:{
        date:'',
        // startTime:'',
        // endTime:'',
        type:'', // KP、PB
        search:'',
      },
      listMenu:[]
    }
  },
  computed: {},
  created() {
    // this.form.startTime = dayjs().format('YYYY-MM-DD')+' 00:00:00'
    // this.form.endTime = dayjs().format('YYYY-MM-DD')+ ' 23:59:59'
    this.form.date = dayjs().format('YYYY-MM-DD')
    this.getdvListBidInfo()
    // this.getDvListAreaRoom()
    this.getSiteDataV2()
  },
  methods: {
    onEmit(val){
      const bidId = val.bidId
      const index = this.listMenu.findIndex(x=> x.guid === bidId)
      this.item_text_hover = index
    },
    // 获取场地占用情况
    getSiteDataV2(){
      getSiteDataV2(this.form.time ).then(res=>{
        // console.log('房间',res);
        const data = [...dataJson['十楼'],...dataJson['十二楼']]
        const newData = []
        for(const item of  res.data){
          for(const ite of data){
            if(item.uwbAreaId !== '0' && item.uwbAreaId === ite.id){
              // 将json数据放入数据
              newData.push({...item,x:ite.x,y:ite.y,roomName:ite.name})
            }
          }
        }
        this.$refs.proView.threeSetCangdi(newData)

      })
    },
    // 下拉箭头
    loadNode(node, resolve){
      if (node.level === 0) {
        return resolve(node.data);
      }

      if (node.level === 1) {
        return resolve(node.data.children);
      }
      if (node.level === 2) {
        const id = node.data.id
        const areaType = node.data.areaType
        if(node.data.areaType === '0'){
          dvGetlistCamera({id,areaType}).then(res=>{
            resolve(res.data.concat(node.data.children))
          })

        }else{
          resolve(node.data.children)
        }

      };
      if (node.level === 3) {
        const id = node.data.id
        const areaType = node.data.areaType
        //  查询场地
        dvGetlistCamera({id,areaType}).then(res=>{
          resolve(res.data)
        })
      }


    },
    treeNodeClickEvent(data, node,){
      if(node.level === 3){
        this.$refs['videoComp'].clickEvent(node.data.id);
        //   this.clickEvent(data.id);
      }
    },
    // 获取房间结构
    getDvListAreaRoom(){
      dvListAreaRoom().then(res=>{
        if(res.code === 0){
          res.data.forEach(e=>{
            e.name = e.floorname
            e.leaf= false
            // roomList 存在0 不存在1
            e.areaType = e?.roomList? '0':'1'
            e.children = e.districtList
            e.children.forEach(x=>{
              x.children = x.roomList
              e.leaf= false
              x.areaType = x?.roomList? '0':'1'
              x.children.forEach(y=>{
                y.areaType = y?.roomList? '0':'1'

              })
            })
          })
          console.log('data',res.data);
          this.treeData = res.data
        }
      })
    },
    // 项目监控  场地监控
    handleTabsChange(){
      this.getdvListBidInfo()
      //  跳转到工作人员轨迹
    },
    handTimeChange(){
        // this.form.dat = this.form.time
        // this.form.endTime =  this.form.time.split(' ')[0]+ ' 23:59:59'
    },
    handleChangeActiveDiv(val){
      this.$set(this.form,'type',val)
      this.getdvListBidInfo()
    },
    // 选中项目
    handleMevu(item){
      console.log('item',item);
      
      const { xm,xmguid,guid,pbkstime,pbroom,pbroomid,pbfloorname,pbjstime,kbAreaid,pbUWBAreaid } = item
      if(!xm) return
      this.$set(this.tcData,'projectName',xm.name)
      this.$set(this.tcData,'projectId',xmguid)
      this.$set(this.tcData,'bidId',guid)
      this.$set(this.tcData,'pbkstime',pbkstime)
      this.$set(this.tcData,'kbAreaid',kbAreaid)
      this.$set(this.tcData,'pbUWBAreaid',pbUWBAreaid)
      this.$set(this.tcData,'pbroom',pbroom)
      this.$set(this.tcData,'pbroomid',pbroomid)
      this.$set(this.tcData,'pbfloorname',pbfloorname)
      this.$set(this.tcData,'pbjstime',pbjstime)
      if(this.activeName === 'two' && this.form.type === 'PB' ){
        // this.$router.push({path:'/DP4',query:{...this.tcData,tabName:'评标专家'} })
        return
      }
      // if(kbAreaid){
      //   this.$refs['proView'].getObject3DPaoPao(kbAreaid)
      // }
      if(pbUWBAreaid){
        this.$refs['proView'].getObject3DPaoPao(pbUWBAreaid)
      }
    },
    getXMLX(item){
      const  jylx =  item?.xm?.jylx
      if(jylx === 'JSGC') return '建设工程'
      return '政府采购'
    },
    // 查询项目信息
    handleSubmit(){
      this.getdvListBidInfo()
      this.getSiteDataV2()
    },
    // 获取项目列表
    getdvListBidInfo(){
      dvListBidInfoAll( this.form).then(res=>{
        console.log(res.data);
        if(res.code === 0){
          this.listMenu = res.data
          this.activeNameFlg = false
          // //    const changdiList = res.data.map(x=>{
          // //       if(x.uwbareaid){
          // //          return {
          // //          projectId:x.xmguid,
          // //          bidId:x.guid,
          // //          time:x.pbkstime,
          // //          uwbareaid:x.uwbareaid,
          // //          pbroom:x.pbroom,
          // //          pbroomid:x.pbroomid
          // //       }
          // //      }
          // //   }
          // //  ).
          //  this.$refs.proView.threeSetCangdi(changdiList)
        }
      })
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    handleSVGcheng(index){
      this.spiltIndex = index
    },
    //   今日项目 历史项目
    handleLeftPid(val){
      this.activeName = val
      // if(val === 'two'){
      //   // 选取前三个月数据
      //   let threeDate = new Date();
      //   threeDate.setMonth(threeDate.getMonth() - 1)
      //   const today = dayjs(threeDate).format('YYYY-MM-DD')+ ' 00:00:00'
      //   // 历史的 30天内
      //   this.form.startTime = today
      //   const now = dayjs();
      //   const yesterday = now.subtract(1, 'day');
      //   this.form.endTime = yesterday.format('YYYY-MM-DD')+ ' 23:59:59'
      // } else{
      //   // 今日的
      //   this.form.startTime = dayjs().format('YYYY-MM-DD')+' 00:00:00'
      //   this.form.endTime = dayjs().format('YYYY-MM-DD')+ ' 23:59:59'
      // }
      if(val === 'two'){
        const now = dayjs();
        const yesterday = now.subtract(1, 'day');
        this.form.date = yesterday.format('YYYY-MM-DD')
        // this.form.startTime = yesterday.format('YYYY-MM-DD')+ ' 00:00:00'
        // this.form.endTime = yesterday.format('YYYY-MM-DD')+ ' 23:59:59'
      }
      this.getSiteDataV2()
      this.getdvListBidInfo()

      // this.getdvListBidInfo()
    },
    handleClick(){
      console.log(111);

    }
  },
  destroyed(){
    // this.$refs.tree.setCurrentKey(null)
  },
}
</script>
<style lang="scss">

.el-popover.monitor-yt-popover {
  width: 220px;
  height: 276px;
  padding: 4px;
  font-size: 14px;
  z-index: 2;
  border-radius: 4px;
  background-color: #090d29;
  border-color: #146ebd;
  border: 2px solid #4395FF;
  background: linear-gradient( 180deg, #02439E 0%, #00082E 79%, #004E9C 100%);
  box-shadow: inset 0px 0px 39px 0px #024DE1;
}
.popover-main{
  color: #fff;
  //  border: 1px solid red;
  div{
    padding:0 4px;
    height: 30px;

    &:first-child {
      padding-top: 10px;
      height: 50px;
      background: linear-gradient( 90deg, #02439E 0%, #00082E 60%, #004E9C 100%);
    }
  }

}
//   .custom-tree-node
.el-icon-video-camera-solid{
  display: block;
  color: red !important;
  font-size:20px !important;
  width: 20px !important;
  height: 20px !important;
}

</style>

<style lang="scss" scoped>
#visual {
  width: 100%;
  height:100vh;
  background: url("../../../../assets/bg.jpg");
  background-size: 100% 100%;
  ul,li{
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .visual-app {
    width:  100%;
    height: 100vh;


    //   overflow: hidden;
    header {
      width: 100%;
      height: 174px;
      .titleFont{
        font-family: HYYaKuHeiJ; //汉仪雅酷黑简 Regular
        font-size: 34px;
        color: #FFFFFF;
        line-height: 47px;
        text-align: center;
        font-style: normal;
        height: 64px;
        line-height: 64px;
      }

      .header_button{
        height: 60px;
        display: flex;
        align-items: center;
        padding: 0 10px;
        justify-content: space-between;
        color: #fff;

      }
      .font18{
        font-size: 18px;
      }

    }
    section {
      width: 100%;
      height: calc(100vh - 185px);
      box-sizing: border-box;
      padding: 0px 10px;
      color:#fff;
      display: flex;
      li{
        height: 44px;
        background-color: #013A86;
      }
      .left_menu{
        box-sizing: border-box;
        cursor: pointer;
        width: 365px;
        height: 100%;
        padding:10px 8px;
        background-image:url("../../../../assets/imgs/dp/底图@2x.png");
        background-size:100% 100%;
        // background-attachment:fixed;
        .left_menu_div{
          height: 60px;
          padding: 5px 10px;
        }
        .left_menu_tabs{
          position: relative;
          height: 60px;
          line-height: 52px;
          font-size: 18px;
          display: flex;

          span{
            display: inline-block;
            height: 30px;
            line-height: 30px;
          }
          .left_menu_tabs_time{

            position: absolute;
            z-index: 1;
            top: 40px;
            left: 86px;
            width: 450px;
            display: flex;
            align-items: center;
            padding: 8px 0px;
            background: linear-gradient( 180deg, #02439E 0%, #00082E 79%, #004E9C 100%);
            box-shadow: inset 0px 0px 39px 0px #024DE1;
            border: 2px solid #4395FF;

            // .triangle{
            //    position: absolute;
            //    top: -6px;
            //    left: 100px;
            //    width: 0;
            //    height: 0;
            //    border-left: 0px solid transparent;
            //    border-right: 10px solid transparent;
            //    border-top: 10px solid #4395FF;
            //    transform:rotate(45deg);
            // }
          }
        }
        .left_menu_first{
          height: 34px;
          border-radius: 5px;
          // margin-left: 0px;
          font-size: 14px;
          border: 1px solid #4395FF;
          background-color: #021a79;
          color:#e5e5e5;
          display: flex;
          justify-content: space-around;
          align-items: center;
          > div {
            height: 100%;
            width: 100%;
            display: inline-block;
            line-height: 34px;
            text-align: center;
            // background: #fff;
            width: 100%;
            &:last-child{
              // border-left: 1px solid #e5e5e5;
            }
            &.activeDiv{
              background-color: #1890ff;
            }
          }

        }
        .left_menu_ul{
          height: calc(100% - 120px);
        }

        //列表
        .triangle{
          position: absolute;
          top: -6px;
          left: 100px;
          width: 0;
          height: 0;
          border-left: 0px solid transparent;
          border-right: 10px solid transparent;
          border-top: 10px solid #4395FF;
          transform:rotate(45deg);
        }
        .popoverli{
          display: flex;
          margin-bottom: 6px;
          height: 44px;
          font-size: 16px;
          line-height: 44px;
          border: 1px solid #013A86;
          >span:first-child {
            width: 60px;
            text-align: center;

          }
          >span:nth-child(2){
            display: inline-block;
            width: 420px;
          }
          .text-overflow {
            white-space: nowrap; /* 不换行 */
            overflow: hidden; /* 隐藏超出的内容 */
            text-overflow: ellipsis; /* 用省略号表示被隐藏的部分 */
            max-width: 280px; /* 设置最大宽度以限制文本的显示长度 */
          }
        }
        .activeli{
          border: 1px dashed #fff;
          background-color: #0A6ACF;

        }


        // 树组件
        &.tree{
          .filter_tree{
            height: 780px;
            overflow-y: scroll;
          }
          .filter_tree{
            margin-top: 20px;
            background-color:transparent;
            color: #fff;
          }
          ::v-deep .el-tree-node__content:hover {
            background: #245FCD;
            color: #fff;
          }
          ::v-deep .el-tree-node__expand-icon{
            color: #fff;
          }
          ::v-deep .el-input__inner{
            background-color: #0c4f97;
            border: 1px solid #4395FF;
            color: #fff;
          }
          ::v-deep .el-input-group {
            border: 1px solid #4395FF;
          }
          ::v-deep .el-input__inner::placeholder {
            color: #cfcfcf;
          }
          ::v-deep .el-icon-search{
            color: #fff;
          }

        }
      }
      main{
        width: 100%;
        height: 100%;
        margin-left: 20px;
        margin-right: 20px;
        // border: 1px solid red;
        // background-image:url("../../../../assets/imgs/dp/监控背景底@2x.png");
        background-size:100% 100%;
        // background-attachment:fixed;
        .main_top{
          height: 76px;
          line-height: 76px;
          text-align: center;
          .triangle{
            display: inline-block;
            width: 0;
            height: 0;
            margin-top: 20px;
            margin-left: 14px;
            border-left: 6px solid transparent;
            border-right: 6px solid transparent;
            border-top: 8px solid #fff;
          }
        }
      }

    }

  }
}
//  图标样式
.iconfontSvg{
  width: 28px;
  height:28px;
  fill:#fff;
  margin-left: 10px;
}
.iconfontSvg.active{
  fill:#0984ff !important;

}




//  element-ui
::v-deep  .el-tabs--bottom, .el-tabs--top{
  height: 30px;
}
::v-deep .el-radio-button__inner{
  width: 182px;
  height: 38px;
  padding: 0px;
  line-height: 36px;
  background: #013A86;
  border-radius: 0px 5px 5px 0px;
  border: 1px solid #1984f7;
  color: #fff;
  font-size: 18px;
}

::v-deep .el-radio-button:first-child .el-radio-button__inner{
  border-left:1px solid #1984f7;
}
::v-deep .el-radio-button__orig-radio:checked+.el-radio-button__inner{
  font-weight: bold;
}
//  form表单
::v-deep .el-form {
  // border: 1px solid red;
  color: #fff;
}
::v-deep .el-form-item__label{
  color: #fff;

}
//  时间框
::v-deep .el-range-input{
  background-color: #0c4f97;
  color: #fff;
}
::v-deep .el-range-editor.el-input__inner{
  background-color: #0c4f97;
  border: 1px solid #4395FF;
  color: #fff;
}
::v-deep .el-range-separator{
  color: #acacac;
  margin-top: -2px;
  // font-size: 14px;
}

// 输入框
::v-deep .el-input.el-input--mini .el-input__inner{
  background-color: #0c4f97;
  border: 1px solid #4395FF;
  color: #fff;
}
.jfbutton{
  background-color: #4395FF;
  color: #fff;
  border: 1px solid #4395FF;
  border-radius: 2px;
  &.top{
    width: 365px;
    height: 40px;
    background-color: #0c4f97;
    font-size: 18px;
  }
}

//  tree 输入框
// ::v-deep .el-tree-node__expand-icon {
//    color:#7d8181;
// }
// ::v-deep .el-tree-node__expand-icon.is-leaf {
//    color: transparent !important;
//    cursor: default;
// }


</style>

